import { vw } from '@/common/dimensions';
import LazyImage from '@/components/LazyImage';
import { SceneItemType } from '@/store/home'
import React from 'react'
import {  Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import StickerFooter from './StickerFooter';
import TopLeftIcon from '../TopLeftIcon';
import { router } from 'expo-router';



/*  Sticker text组件 */
const StickerText = (props:{iconDesc?:string}) => (
    <View style={styles.stickerTextContainer} >
        <Text style={styles.stickerText}>{props.iconDesc}</Text>
    </View>
)


export default function TempSticker(props:{sceneItem:SceneItemType}) {
    let {sceneItem} = props
    let { iconPath , iconDesc } = sceneItem
    let { display_mode , cover_image_list } = sceneItem.json_content;
    let largeImage:{path:string } = {path:''} ;
    let smallImages:{path:string; }[][] = [[] , []] ;
    if(display_mode === '2'){
        largeImage = cover_image_list[0]; // 假设第一张为大图
        smallImages = cover_image_list.slice(1).reduce(
            (acc:{ path: string; }[][], cur, index) => {
                const targetIndex = index % 2;
                acc[targetIndex].push(cur);
                return acc;
            },
            Array.from(Array(2), () => [])
        ); 
    }

    const handleOnPress = () => {
        router.navigate({
            pathname:'/createSticker',
            params:{
                id:sceneItem.id
            }
        })
    }
    
    return (
        <View>
            {
                display_mode === '1' && (
                    <Pressable onPress={handleOnPress}>
                         <View style={[styles.imageContainer , styles.modeContainer]}>
                            <TopLeftIcon iconPath={iconPath} />
                            <ScrollView 
                                horizontal={true} 
                                showsHorizontalScrollIndicator={false}
                                contentContainerStyle={styles.scrollContainer} // 确保内容容器对齐
                                nestedScrollEnabled={true} // 启用嵌套滚动
                            >
                                {cover_image_list.map(item => (
                                    <LazyImage
                                        key={item.path}
                                        style={styles.mode1Image}
                                        uri={item.path}
                                        defaultSource={require('@/assets/common/perch.png')}
                                    />
                                ))}
                            </ScrollView>
                            <StickerText  iconDesc={iconDesc} />
                            <StickerFooter 
                                title={sceneItem.json_content.cn.title}
                                desc={sceneItem.json_content.cn.desc}
                                points={sceneItem.points_json.points}
                            />
                        </View>
                    </Pressable>
                )
            }
            {
                display_mode === '2' && (
                    <Pressable onPress={handleOnPress}>
                        <View style={[styles.modeContainer , {marginBottom:4}]}>
                            <TopLeftIcon iconPath={iconPath} />
                            <ScrollView
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                                contentContainerStyle={styles.smallImagesContainer}
                                nestedScrollEnabled={true} // 启用嵌套滚动
                            >   
                                <LazyImage 
                                    style={styles.largeImage}
                                    uri={largeImage?.path}
                                    defaultSource={require('@/assets/common/perch.png')}
                                />
                                {smallImages?.map((item, index) => (
                                    <View key={index} style={styles.smallImageWrapper}>
                                        {
                                            item.map(p => (
                                                <LazyImage
                                                    key={p.path}
                                                    style={styles.smallImage}
                                                    uri={p.path}
                                                    defaultSource={require('@/assets/common/perch.png')}
                                                />
                                            ))
                                        }
                                    </View>
                                ))}
                            </ScrollView>
                            <StickerText  iconDesc={iconDesc} />
                            <StickerFooter 
                                title={sceneItem.json_content.cn.title}
                                desc={sceneItem.json_content.cn.desc}
                                points={sceneItem.points_json.points}
                            />
                        </View>
                    </Pressable>
                )
            }
            {
                display_mode === '3' && (
                    <Pressable onPress={handleOnPress}>
                        <View style={[styles.modeContainer ]}>
                            <TopLeftIcon iconPath={iconPath} />
                            <ScrollView
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                                nestedScrollEnabled={true} // 启用嵌套滚动
                                contentContainerStyle={styles.smallImagesContainer}
                            >   
                                {cover_image_list.map(item =>(
                                    <LazyImage
                                        key={item.path}
                                        style={styles.mode3Image}
                                        uri={item.path}
                                        defaultSource={require('@/assets/common/perch.png')}
                                    />
                                ))}
                            </ScrollView>
                            <StickerText  iconDesc={iconDesc} />
                            <StickerFooter 
                                title={sceneItem.json_content.cn.title}
                                desc={sceneItem.json_content.cn.desc}
                                points={sceneItem.points_json.points}
                            />
                        </View>
                    </Pressable>
                )
            }
            {
                display_mode === '4' && (
                    <Pressable onPress={handleOnPress}>
                        <View style={[styles.modeContainer]}>
                            <TopLeftIcon iconPath={iconPath} />
                            <View style={styles.mode4View} >   
                                {cover_image_list.map(item => (
                                    <LazyImage 
                                        key={item.path}
                                        style={styles.mode4Image}
                                        uri={item.path}
                                        defaultSource={require('@/assets/common/perch.png')}
                                    />
                                ))}
                            </View>
                            <StickerText  iconDesc={iconDesc} />
                            <StickerFooter 
                                title={sceneItem.json_content.cn.title}
                                desc={sceneItem.json_content.cn.desc}
                                points={sceneItem.points_json.points}
                            />
                        </View>
                    </Pressable>
                )
            }
        </View>
    )
}

const styles = StyleSheet.create({
    modeContainer:{
        width:96 *vw,
        marginBottom:16,
    },
    imageContainer: {
        paddingVertical:12,
        width: '100%',
    },
    scrollContainer: {
        paddingLeft: 0,   // 去掉容器左边的填充
        paddingRight: 0,  // 去掉容器右边的填充
        alignItems: 'center', // 确保内容居中（可选）
    },
    mode1Image:{
        width:30 * vw,
        height: 30 * vw,
        borderRadius:16,
        marginRight:8
    },
    mode3Image:{
        width:41 * vw,
        height:41 * vw,
        borderRadius:16,
        marginRight:16
    },
    mode4View:{
        height:94 *vw ,
        flexDirection: 'row', // 横向排列小图
        flexWrap: "wrap",
        justifyContent:'space-between',
        alignContent:'space-between',
    },
    mode4Image:{
        width:46 * vw,
        height:46 * vw,
        borderRadius:16,
    },
    largeImage: {
        width: 46 * vw,
        height: 46 * vw,
        borderRadius: 16,
        marginRight: 8, // 左侧大图和右侧小图之间的间隙
    },
    smallImagesContainer: {
        paddingLeft: 0,
        paddingRight: 0,
    },
    smallImageWrapper: {
        width:46 * vw ,
        height: 46 * vw, // 两行图片，高度为大图的高度,
        flexDirection: 'row', // 横向排列小图
        flexWrap: "wrap",
        justifyContent:'space-between',
        alignContent:'space-between',
        marginRight:2*vw
    },
    smallImage: {
        width: 22 * vw,
        height: 22 * vw, // 每个小图宽高 22vw
        borderRadius: 8,
    },
    
    stickerTextContainer:{
        position:"absolute",
        bottom:48,
        left:0,
        paddingHorizontal:8,
        paddingVertical:4,
        backgroundColor:'rgba(0,0,0,.4)',
        alignItems: 'center',
        borderBottomLeftRadius:12,
        borderTopRightRadius:12,
        zIndex:1
    },
    stickerText:{
        color: '#FFD583',
        fontWeight:'bold'
    }
})